今天來到了 computed計算屬性了 !

模板內可以使用表達示，這點非常的方便，但是設計它們的初衷是用於簡單運算的。
但是在模板中放入太多的邏輯會讓模板過重且難以維護，且當你想要在模板中多次引用時，就會更加難以處理。

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

所以這時候就會需要computed來計算屬性啦!

範例

<div class="box" id="app"> 
    <input v-model="message"/>
    <span>反轉字:{{reversedMessage}}</span>
  </div>

computed的觸發條件，是透過data裡面的值，當值更動的時候這個computed才會受到更動喔!

var vm = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

一天又平安的過去了